Bricks HTML Template
- By: Mad_Dog
- themeforest.net/user/mad_dog
- Support Forum: http://forums.gt3themes.com
Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to submit your request to my support forum. Also you can find a lot of useful information right there. Thanks so much!
How to change the logo?
You can do that very easily, simply replace the current text with your own one.
The current logo text is located in .html files the lines 54-56
<div class="logo">
<a href="index.html">BRICKS.
</div>
The text logo styles are located in css/screen.css file the line #697
header .logo {
color: #fff;
font-family: "PT Sans",sans-serif;
font-size: 25px;
font-weight: 700;
left: 15px;
letter-spacing: 0.1em;
line-height: 24px;
position: absolute;
text-transform: uppercase;
top: 50%;
transform: translateY(-50%);
}
How to switch Header types?
This templates has an option to choose different header types, there are 2 of them, you can check their look at the demo page.
Let's take a look how to do that. Please open index.html or any other file to find the line with the code <header class="header-v2">. This is the 2nd version of the header.
<header class="header-v2">
<div class="top-header">
<div class="container-fluid">
Here is the first version:
<header>
<div class="top-header">
<div class="container">.
Please note, if you will not make changes your, header will be the default type provided in the files.
How to change Header Tagline Text?
This template has a tagline section with phone number, mail address, social icons etc.
Let's take a look how to change the details. Please open index.html or other files to find the lines 29-43:
<div class="container-fluid">
<ul class="contacts">
<li><i class="fa fa-phone"></i>+1 (800) 456 37 96</li>
<li><a href="mailto:info@company.com"><i class="fa fa-envelope"></i>info@company.com</a></li>
</ul>
<ul class="socials">
<li><a href="#"><i class="fa fa-facebook-square"></i</a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
</ul>
</div>
Revolution Slider
There are presented Revolution Slides on Home pages: Home1, Home2, Home3, Home4.
All the required scipt files you can find in rs-slider folder. Note, the slider will not work locally, it displays the following errors !! Error at loading Slider Revolution 5.0 Extrensions. Local Filesystem Detected It will display slider only on the web server.
If you want to manage the slides data, please open one of the pages, for example index.html file the lines 269-362:
<div class="rev_slider_wrapper">
<div class="fullscreen_slider rev_slider">
<ul>
<li data-transition="fade">
<img src="img/slider-background-1.jpg" alt="slide1" data-bgfit="cover"
data-bgposition="center center" data-
kenburns="on" data-duration="7000" data-ease="Linear.easeNone" data-scalestart="110"
data-scaleend="100" data-
rotatestart="0" data-rotateend="0" data-offsetstart="0 0"
data-offsetend="0 0" data-bgparallax="10" class="rev-
slidebg" data-no-retina>
<div class="tp-caption WhiteTtl tp-resizeme"
data-x="center" data-hoffset="0"
data-y="middle" data-voffset="-50"
data-whitespace="nowrap"
data-transform_idle="o:1;"
data-transform_in="y:-150px;opacity:0;s:1000;e:Power4.easeOut;"
data-transform_out="opacity:0;s:500;s:500;"
data-start="1300"
data-responsive_offset="on">Construct your future
</div>
<div class="tp-caption WhiteTtlp tp-resizeme"
data-x="center" data-hoffset="0"
data-y="middle" data-voffset="30"
data-whitespace="pre"
data-transform_idle="o:1;"
data-transform_in="y:-100px;opacity:0;s:1000;e:Power2.easeOut;"
data-transform_out="opacity:0;s:500;s:500;"
data-start="1700"
data-responsive_offset="on">As the general contructor, we first create the highest level
of trust and integrity with our
clients. We value our role in the success of your project.
</div>
How to add/manage Portfolio?
There are 5 portfolio pages come with this template:
- Grid 1,2,3,4 Columns and Masonry Portfolio.
Let's take a look at Masonry Portfolio, please open portfolio_masonry.html file and go to line #267:
<div class="isot-projects-wrapper" data-default-selection="*">
<div class="container-fluid">
<div class="row isotope">
<div class="col-md-3 col-xs-6 isotope-item buildings">
<div class="portfolio-box-circle masonry">
<div class="image">
<a href="#">
<img src="img/portfolio-masonry-1.jpg" alt="portfolio box">
</a>
</div>
<h6 class="title"><a href="#">Fullwidth video project</a></h6>
<ul class="categories clean-list">
<li><a href="#">Construction</a></li>
<li<a href="#">Interior Design</a></li>
</ul>
</div>
</div>
- <div class="col-md-3 col-xs-6 isotope-item buildings">> is the name of a category it belongs to.
- src="mg/portfolio-masonry-1.jpg"is the path to an image.
- a href="#"is the path to the portfolio item page.
- <h6 class="title"is the title of the portfolio item.
How to add/manage Gallery?
As you can see this template comes with the Gallery layout.
Let's try to manage the gallery. Please open gallery.html file find the line 243 and review the code below:
<div class="gallery-wrapper">
<div class="row isotope">
<div class="col-md-3 col-xs-6 isotope-item">
<div class="gallery-item">
<div class="cover">
<img src="img/gallery-wrapper-item-1.jpg" alt="">
<a href="img/gallery-item-big-image.jpg" class="view-link photozoom"></a>
</div>
</div>
</div>
Every gallery item starts and ends with <div></div>
- <img src="img/gallery-wrapper-item-1.jpg": is the path to a thumb image;
- <a href="iimg/gallery-item-big-image.jpg">: is the image that opens in the lightbox window;
- Note, change only details indicated above.
How to use Shortcodes ?
In case you need to use one of the existing shortcodes on your page you should simply open required page and copy the existing shortcode
For example in index.html you want to copy Partners. In this case copy the code starting from line 527-554 and then past it in your page where you need and then edit it.
<div class="row content">
<div class="col-md-10 col-md-offset-1">
<div class="clients-row">
<div class="row">
<div class="col-xs-4">
<a href="#"><img src="img/partner-logo-1.png" alt="partner logo"></a>
</div>
<div class="col-xs-4">
<a href="#"><img src="img/partner-logo-2.png" alt="partner logo"></a>
</div>
<div class="col-xs-4">
<a href="#"><img src="img/partner-logo-3.png" alt="partner logo"></a>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<a href="#"><img src="img/partner-logo-4.png" alt="partner logo"></a>
</div>
<div class="col-xs-4">
<a href="#"><img src="img/partner-logo-5.png" alt="partner logo"></a>
</div>
<div class="col-xs-4">
<a href="#"><img src="img/partner-logo-6.png" alt="partner logo"></a>
</div>
</div>
</div>
</div>
</div>
Simply change the fields with yours, if it is required. That's it.
How to change the color of the theme?
The main theme color styles you can find in ...css/screen.css file.
Contact Form Setup
You can setup your contact form in 2 clicks, please open mail.php file and find test@test.com on line 3, simply replace to your email address. All the requests will be sent to the adress you indicated. That's all ;)
In case you need to use the contacts page with the form where customer can send mail, simply open one of the files contact.html or contact-2.html to find the code:
<form class="respond-form">
<h6>Drop us a line</h6>
<div class="row">
<div class="col-md-6">
<div class="input-line">
<input type="text" name="contact-name" class="check-value">
<span>Name</span>
</div>
<div class="input-line">
<input type="text" name="contact-email" class="check-value">
<span>Email</span>
</div>
</div>
</div>
<div class="input-line textarea">
<textarea class="check-value" name="contact-message" placeholder=""></textarea>
<span>Message</span>
</div>
<button class="form-send btn yellow dark-hover" type="submit">submit</button>
</form>
How to setup Instagram?
The Latest instagrams shots display on the several pages in footer. Please follow the steps below to activate Instagram from your account:
- open js/options.js file the lines 170-245. Note, please change the clientID: '632fb01c8c0d43d7b63da809d0b6a662', to your user ID number.
- When the user id will be changed, please open any file where you see the instagran feed and change a username:
<div class="col-md-3 col-sm-6 col-xs-12 isotope-item">
<div class="widget widget_instagram">
<h4 class="widget-title">Follow Instagram</h4>
<div class="widget-body">
<ul class="instagram-feed clean-list" data-instagram="6" data-instagram-username="mrgicucaus"></ul>
</div>
</div>
</div>
Source files included
Frame comes with 28 PSD and 27 HTML files. Some PSD files can include different pages inside, and can have hidden layers. Please note that the images are not included in the package.
All .js files are located in the /js/ folder.